<template>
  <div>
    <van-image :src="data.image" />
    <main style="padding: 10px 15px">
      <div class="title">{{ data.title }}</div>
      <div class="integral">{{ data.integral }}积分</div>
      <div class="content">商品介绍：{{ data.content }}</div>
    </main>
    <van-divider :hairline="false" />

    <van-form label-width="10em">
      <van-cell-group inset>
        <van-field
          v-model="data.weight"
          name="weight"
          size="large"
          label="重量"
          placeholder="重量"
          :rules="[{ required: true, message: '请填写重量' }]"
        >
          <template #input>{{ data.weight }}kg</template>
        </van-field>
        <van-field
          v-model="data.weight"
          name="attribute"
          size="large"
          label="规格"
          placeholder="规格"
          :rules="[{ required: true, message: '请填写规格' }]"
        >
          <template #input>
            <van-cell is-link title="请选择颜色" @click="show = true" style="padding: 0" />
          </template>
        </van-field>
      </van-cell-group>
    </van-form>
    <van-popup v-model:show="show" position="bottom" :style="{ height: '43vh' }">
      <div class="starItem">
        <div><img :src="data?.image" alt="" /></div>
        <div class="one">
          <div>{{ data?.title }}</div>
          <div class="go">
            <div>{{ data?.integral }}积分</div>
            <div></div>
          </div>
        </div>
      </div>
      <div style="font-size: 15px; font-weight: bold; padding: 0 1rem">选择颜色</div>
      <div
        style="
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          column-gap: 2rem;
          padding: 1rem;
        "
      >
        <div
          v-for="(item, index) in data?.attribute.split(',')"
          :key="index"
          :style="active === index ? 'background:#ffc456;color:#fff;border:none' : ''"
          style="
            border: solid 0.5px #bbbbbb;
            border-radius: 5px;
            padding: 0.3rem 0.5rem;
            font-size: 14px;
            text-align: center;
          "
        >
          {{ item }}
        </div>
      </div>
      <div style="padding: 1rem;margin-top: 5vh;">
        <van-button type="primary" style="width: 100%; border-radius: 20px" @click="querenOrder"
          >立即购买</van-button
        >
      </div>
    </van-popup>

    <van-action-bar>
      <van-action-bar-icon icon="share-o" text="分享" @click="onClickIcon" />
      <van-action-bar-icon
        icon="star"
        text="已收藏"
        color="#ff5000"
        @click="cancelStar"
        v-if="data.collect == 1"
      />
      <van-action-bar-icon icon="star-o" text="收藏" @click="star" v-else />
      <van-action-bar-button type="primary" text="立即购买" @click="show = true"  />
    </van-action-bar>
  </div>
</template>

<script setup>
import { useIntegrallist } from '@/stores/integralList.js' // 导入名为useIntegrallist的自定义钩子函数
import { useUserInfoStore } from '@/stores/user.js' // 导入名为useUserInfoStore的自定义钩子函数
import { storeToRefs } from 'pinia' // 导入storeToRefs函数用于创建响应式对象
import { computed, ref } from 'vue' // 导入computed和ref函数用于创建计算属性和响应式数据
import { useRouter } from 'vue-router' // 导入useRouter函数用于获取Vue Router实例对象
import { integralOrder } from '../api' // 导入integralOrder接口函数

const show = ref(false) // 创建名为show的响应式变量，默认值为false
const userInfoStore = useUserInfoStore() // 调用useUserInfoStore钩子函数创建名为userInfoStore的用户信息Store对象
const { curStudent } = storeToRefs(userInfoStore) // 使用storeToRefs函数将userInfoStore中的curStudent属性转化为响应式对象
const integrallist = useIntegrallist() // 调用useIntegrallist钩子函数创建名为integrallist的积分列表Store对象
const { curJob } = storeToRefs(integrallist) // 使用storeToRefs函数将integrallist中的curJob属性转化为响应式对象
const router = useRouter() // 获取Vue Router实例对象

async function querenOrder() { // 定义名为querenOrder的异步函数，用于确认订单
  let res = await integralOrder({ // 调用integralOrder接口函数，传递参数user_id、address_id和points_id，并将返回结果赋值给res变量
    user_id: curStudent.value.id,
    address_id: curStudent.value.address_id,
    points_id: curJob.value.id
  })
  router.push({ // 通过router进行页面跳转，跳转至'/QuerenOrder'路径，并传递query参数orderId
    path:'/QuerenOrder',
    query:{
      orderId:res.id
    }
  })
}

const data = computed(() => curJob.value) // 创建计算属性data，返回curJob的值
const active = ref(0) // 创建名为active的响应式变量，默认值为0

</script>

<style lang="less" scoped>
@var1: #ff462a;
@var2: #ffc456;
@var3: #f5f6f8;
@var4: #ffffff;
.starItem {
  padding: 1rem;
  display: flex;
  background-color: @var4;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  img {
    width: 100px;
    height: 100px;

    border-radius: 10px;
  }
  .one {
    width: 65%;
    > div:first-child {
      font-weight: 900;
      font-size: 14px;
    }
  }
  .go {
    margin-top: 35px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    > div:first-child {
      color: @var1;
      font-size: 14px;
      font-weight: 900;
    }
  }
}
.title {
  font-size: 17px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  overflow: hidden;
  -webkit-box-orient: vertical;
  font-weight: bold;
}
.integral {
  margin: 0.5rem 0;
  color: red;
  font-size: 18px;
  font-weight: bold;
}
.content {
  color: gray;
  font-size: 14px;
}
</style>
